<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Bakery</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/header.css">
        <link rel="stylesheet" href="styles/cakes.css">
        <link rel="stylesheet" href="styles/pancakes.css">
        <link rel="stylesheet" href="styles/sandwich.css">
        <link rel="stylesheet" href="styles/breakfast.css">
        <link rel="stylesheet" href="styles/pastry.css">
        <link rel="stylesheet" href="styles/footer.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <header>
            <section class="logo_header">
                <a id="logo" href="#">
                    <img src="img/logo.png" alt="Gustoso"/>
                </a>
            </section>

            <nav class="menu">
                <ul id="header_menu_ul">
                    <li id="welcome">WELCOME</li>
                    <li id="menu">MENU</li>
                    <li id="reservations">RESERVATIONS</li>
                    <li id="news">NEWS</li>
                    <li id="contact" class="contact last">CONTACT</li>
                </ul>
            </nav>

            <nav class="socials">
                <a id="twitter"> <img src="img/twitter.png" alt="twitter"/> </a>
                <a id="facebook"> <img src="img/facebook.png" alt="facebook"/> </a>
                <a id="instagram"> <img src="img/instagram.png" alt="instagram"/> </a>
            </nav>
        </header>

        <main class="main_contents">
            <div>

                <section class="pastry">
                    <div class="bckg_circle"></div>
                    <div class="position_info_circle">
                        <aside id="circle_header">
                            <h1>Pastery with love</h1>
                        </aside>
                        <aside id="circle_text">
                            <pre>We’re bringing you fresh ingredients every &NewLine;&Tab; day in ways you can’t resist.</pre>
                        </aside>
                        <button id="btn">OUR MENU</button>
                    </div>
                </section>

                <section class="img_bread_logo">
                    <div id="container_img">
                        <div id="outline_img">
                            <div id="white_background_bread">
                                <img id="bread" src="img/bread.png" alt="bread"/>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="art_of_cakes">
                    <div id="art_of_cakes_about">
                        <section id="info">
                            <section id="info_text">
                                <div id="headlines">
                                        <h1>Art of cakes</h1>
                                        <h6>WE CREATE DELICIUS MEMORIES</h6>
                                   </div>
                                   <div id="text">
                                        <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue</p>
                                        <p>Curabitur ullamcorper ultricles nisi. Nam eget dul. Etlam rhoncus</p>
                                        <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam</p>
                                    <p>semper libero, sit amet adipiscing sem neque sed.</p>
                                   </div>
                            </section>
                            <section id="contex">
                                    <h2>Chef Cook</h2>
                                <div id="logo_name">
                                    <div id="name">
                                        <p id="Benito">Benito</p>
                                    </div>
                                    <div id="logo_cook"></div>
                                    <div id="last_name">
                                        <p id="Gaspere">Gaspare</p>
                                    </div>
                                </div>
                                    <img src="img/statement.png" alt="statement">
                            </section>
                        </section>
                    </div>
                    <section id="art_of_cakes_example_food">
                        <div id="art_of_cakes_text">
                            <p id="art_of_cakes_testy_so">TESTY SO</p>
                            <p id="art_of_cakes_good">GOOD!</p>
                        </dvi>
                        <div id="art_of_cakes_counter">
                            <img src="img/flour.png" alt="flour"/>
                            <img src="img/egg.png" alt="egg"/>
                            <img src="img/cake.png" alt="cake"/>
                            <img src="img/strawberry.png" alt="strawberry"/>
                        </div>
                    </section>
                </section>


                <section class="tasty_pancakes">

                    <div id="tasty_pancakes_container">

                        <section id="tasty_pancakes_background">
                            <form id="tasty_pancakes_background_rating">
                               <input id="rating_start_1" name="rating" value="1" type="radio"/>
                               <label for="rating_start_1">☆</label>
                               <input id="rating_start_2" name="rating" value="2" type="radio" checked/>
                               <label for="rating_start_2">☆</label>
                               <input id="rating_start_3" name="rating" value="3" type="radio"/>
                               <label for="rating_start_3">☆</label>
                               <input id="rating_start_4" name="rating" value="4" type="radio"/>
                               <label for="rating_start_4">☆</label>
                               <input id="rating_start_5" name="rating" value="5" type="radio"/>
                               <label for="rating_start_5">☆</label>
                            </form>
                        </section>
                        <section id="tasty_pancakes_burger">
                            <div id="tasty_pancakes_burger_circle">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </section>
                        <section id="testy_pancakes_info">
                        <div id="testy_pancakes_info_background">
                            <div id="testy_pancakes_container">
                                <div id="testy_pancakes_info_header">
                                    <h1>Tasty pancakes</h1>
                                    <p>SEASON FAVOURITE</p>
                                </div>

                                <div id="testy_pancakes_info_about">
                                    <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapie ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus.</p>
                                </div>
                            </div>


                                <div id="testy_pancakes_time_ready">
                                    <div id="testy_pancakes_time_ready_container">
                                        <p id="testy_pancakes_time_ready_header">READY IN</p>
                                        <p id="testy_pancakes_time_ready_int">40</p>
                                        <p id="testy_pancakes_time_ready_mins">mins</p>
                                    </div>
                                </div>

                                <div class="testy_pancakes_slider">
                                    <div class="slider" data-slider="slider" data-loop="true" data-autoplay="false">
                                        <div class="slider_wrapper">
                                            <div class="slider_items">
                                                <div class="slider_item slider_item_1"></div>
                                                <div class="slider_item slider_item_2"></div>
                                                <div class="slider_item slider_item_3"></div>
                                            </div>
                                        </div>
                                        <button class="slider_btn slider_btn_prev"></button>
                                        <button class="slider_btn slider_btn_next"></button>
                                    </div>
                                </div>

                            </div>
                        </div>
                        </section>

                    </div>
  
                </section>

                <section class="breakfast">
                    <div class="breakfast_menu_prices">
                        <div class="breakfast_menu_prices_about">
                            <p class="breakfast_menu_prices_about_head">Breakfast</p>
                            <p class="breakfast_menu_prices_about_info">7AM BREAKFAST? WE`RE OPEN!</p>
                        </div>
                        <div class="breakfast_menu_prices_card">
                            <p class="breakfast_menu_prices_card_head">Full breakfast</p>
                            <p class="breakfast_menu_prices_card_info">Duis ut tortor, et risus, vulputate pretium</p>
                            <p class="breakfast_menu_prices_card_price">$12.49</p>
                        </div>
                        <div class="breakfast_menu_prices_card">
                            <p class="breakfast_menu_prices_card_head">Toast & Jam</p>
                            <p class="breakfast_menu_prices_card_info">Suspendisse, tempus, nterdum</p>
                            <p class="breakfast_menu_prices_card_price">$4.90</p>
                        </div>
                        <div class="breakfast_menu_prices_card">
                            <p class="breakfast_menu_prices_card_head">Muffins</p>
                            <p class="breakfast_menu_prices_card_info">Fusce eget dui sodales est</p>
                            <p class="breakfast_menu_prices_card_price">$3.95</p>
                        </div>
                    </div>
                    <div class="breakfast_info">
                            <div class="breakfast_info_paper_background">
                                <div class="breakfast_info_header">
                                    <div class="breakfast_info_header_year">
                                        <p>EST.</p>
                                        <p>1893</p>
                                    </div>
                                </div>
                                <div class="breakfast_info_container">
                                        <div class="breakfast_info_container_circle breakfast_info_container_circle_left"></div>
                                        <div class="breakfast_info_container_line"></div>
                                        <div class="breakfast_info_container_circle">
                                            <img src="img/bun.png" alt="" />
                                        </div>
                                        <div class="breakfast_info_container_line"></div>
                                        <div class="breakfast_info_container_circle breakfast_info_container_circle_right"></div>
                                </div>
                                    <div class="breakfast_info_text_about">
                                        <div class="breakfast_info_text_about_h">
                                            <p class="breakfast_info_text_about_h_t">Your morning</p>
                                            <p class="breakfast_info_text_about_h_b">Escape with Flair</p>
                                        </div>
                                        <div class="breakfast_info_text_about_t">
                                            <p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orce eget eros faucibus tincidunt. Duis leo.</p>
                                        </div>
                                        <div class="breakfast_info_text_btn_container">
                                            <button class="breakfast_info_text_btn">READ</button>
                                        </div>
                                    </div>
                            </div>
                            <div class="breakfast_millet"></div>
                            <div class="breakfast_info_paper_background_index_2"></div>
                            <div class="breakfast_info_paper_background_index_3"></div>
                    </div>
                </section>

                <section class="the_jibarito_sandwich">
                    <div class="the_jibarito_sandwich_header">
                        <div class="the_jibarito_sandwich_header_text">
                            <p class="the_jibarito_sandwich_header_text_header">The jibarito sandwich</p>
                            <p class="the_jibarito_sandwich_header_text_subtext">THE BEST SANDWICH YOU`VE EVER TASTED!</p>
                        </div>
                        <img src="img/the_jibarito_sandwich_header.png" alt="" />
                    </div>
                    <div class="the_jibarito_sandwich_container">
                        <div class="the_jibarito_sandwich_container_items">
                                <div class="the_jibarito_sandwich_container_item sandwich_item_1">
                                    <div class="the_jibarito_sandwich_container_item_img">
                                        <img src="img/sandwich_item_1.png" alt="" />
                                    </div>
                                    <div class="the_jibarito_sandwich_container_item_text">
                                        <h1>Class aptent</h1>
                                        <p>Quot alienum persecuti ut eam, man ad</p>
                                        <p>atquit primis nusquam.</p>
                                    </div>    
                                </div>

                                <div class="the_jibarito_sandwich_container_item sandwich_item_2">
                                    <div class="the_jibarito_sandwich_container_item_img">
                                        <img src="img/sandwich_item_2.png" alt="" />
                                    </div>
                                    <div class="the_jibarito_sandwich_container_item_text">
                                        <h1>Nulla eget</h1>
                                        <p>Nullam dictum felis eu pede mollis</p>
                                        <p>pretium Integet tincidunt.</p>
                                    </div>    
                                </div>

                                <div class="the_jibarito_sandwich_container_item sandwich_item_3">
                                    <div class="the_jibarito_sandwich_container_item_img">
                                        <img src="img/sandwich_item_3.png" alt="" />
                                    </div>
                                    <div class="the_jibarito_sandwich_container_item_text">
                                        <h1>Sed nibh purus</h1>
                                        <p>Aenean eleifend tellus leo ligula,</p>
                                        <p>porttitous eu, consequat vitae.</p>
                                    </div>
                                </div>
                        </div>
                        <div class="the_jibarito_sandwich_container_info">
                            <div class="the_jibarito_sandwich_container_menu_items_border">
                                <div class="the_jibarito_sandwich_container_menu">
                                    <div class="the_jibarito_sandwich_container_btn">
                                        <button>FULL RECIPE</button>
                                    </div>

                                    <div class="the_jibarito_sandwich_container_menu_items">
    
                                        <div class="the_jibarito_sandwich_container_menu_item">
                                                <p class="the_jibarito_sandwich_container_menu_item_h">PREP</p>
                                                <p class="the_jibarito_sandwich_container_menu_item_t">15</p>
                                                <p class="the_jibarito_sandwich_container_menu_item_m">mins</p>
                                        </div>
    
                                        <div class="the_jibarito_sandwich_container_menu_item">
                                            <p class="the_jibarito_sandwich_container_menu_item_h">COOK</p>
                                            <p class="the_jibarito_sandwich_container_menu_item_t">35</p>
                                            <p class="the_jibarito_sandwich_container_menu_item_m">mins</p>
                                        </div>
    
                                        <div class="the_jibarito_sandwich_container_menu_item">
                                            <p class="the_jibarito_sandwich_container_menu_item_h">READY IN</p>
                                            <p class="the_jibarito_sandwich_container_menu_item_t">50</p>
                                            <p class="the_jibarito_sandwich_container_menu_item_m">mins</p>
                                        </div>   
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>

        <footer>
            <nav class="footer_left_menu">
                <ul>
                    <li id="our_menu">OUR MENU</li>
                    <li id="gallery">GALLERY</li>
                    <li id="culture">CULTURE</li>
                </ul>
            </nav>
            <section class="logo-footer">
                <a id="logo-footer"><img src="img/logo.png" alt="Gustoso"/></a>
            </section>
            <nav class="footer_rigth_menu">
                <ul>
                    <li id="events">EVENTS</li>
                    <li id="catering">CATERING</li>
                    <li id="visit_us">VISIT US</li>
                </ul>
            </nav>
        </footer>
    </body>
</html>